import React, {Component} from 'react'
import {listUserInfoReq, queryUserAmount} from '../../../../../requests/supervisor'
import {Button, Input, message, Table} from "antd"
import UserInfo from '../../../../../types/UserInfo'
import UserType from '../../../../../types/UserType'
import ButtonGroup from 'antd/lib/button/button-group'
import {RouteComponentProps, withRouter} from 'react-router-dom'
import {getRes} from "../../../../../configFile";
import {searchUserInfo} from "../../../../../requests/Personal";

interface IProps extends RouteComponentProps { }
interface IState {
    userInfoSource: Array<UserInfo>
    amount: number
    offset: number
    limit: number
    isSearch:boolean
}
const { Search } = Input;
class ModifyUserInfoList extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            userInfoSource: [],
            amount: 0,
            offset: 0,
            limit: 10,
            isSearch:false
        }
    }
    //获取用户数据
    getUserInfo = async () => {
        try {
            const amountRes = getRes(await queryUserAmount(UserType.DEVICEADMIN))
            if (amountRes.isSuccessful === false) {
                message.error(amountRes.message)
                return;
            }
            const res = getRes(await listUserInfoReq(this.state.offset, this.state.limit))
            if (res.isSuccessful === false) {
                message.error(res.message)
                return;
            }
            this.setState({
                userInfoSource: res.data.map((item: UserInfo) => Object.assign({}, item, { key: item.ID })),
                amount: amountRes.data
            })
        }
        catch (error) {
            message.error(error.toString())
        }
    }

    componentDidMount() {
        this.getUserInfo()
    }

    columns = [{
        title: '用户名称',
        dataIndex: 'username',
        key: 'username',
        width: 250
    },
    {
        title: '联系电话',
        dataIndex: 'telephone',
        key: 'telephone',
        width: 150,
        ellipsis: true
    },
    {
        title: '电子邮箱',
        dataIndex: 'email',
        key: 'email',
        width: 200,
    },
    {
        title: '用户类型',
        dataIndex: 'userType',
        key: 'userType',
        width: 200,
        ellipsis: true
    }, {
        title: '操作',
        key: 'action',
        render: (record: UserInfo) => (
            <ButtonGroup>
                <Button size='middle' type='primary' onClick={() => {
                    console.log(record);
                    this.props.history.push(`/siteManage/modifyUser/${record.ID}`)
                }}>编辑</Button>
            </ButtonGroup>
        )
    }]

    onSearch: (values: string) => void = async values => {
        console.log(values)
        if(values===''){
            await this.getUserInfo()
        }else{
            try {
                const res = getRes(await searchUserInfo(values))
                if (!res.isSuccessful) {
                    console.error(res);
                    message.error("查询用户失败" + res.message)
                }
                this.setState({ userInfoSource: res.data, amount: res.data.length, isSearch: true })
            } catch (err) {
                message.error(JSON.stringify(err))
            }
        }
    }

    render() {
        return (
            <div>
                <Search placeholder="搜索" onSearch={values => this.onSearch(values)} allowClear={true} enterButton />
                <Table columns={this.columns}
                    dataSource={this.state.userInfoSource}
                    pagination={{
                        onChange: (page, pageSize) => {
                            console.log(page, pageSize);
                            if (!!pageSize) {
                                this.setState({
                                    offset: (page - 1) * (pageSize),
                                    limit: (pageSize)
                                },()=>{
                                    this.getUserInfo()
                                })
                            } else {
                                console.error('pageSize === undefinde')
                            }
                        },
                        defaultPageSize: this.state.limit,
                        total: this.state.amount,
                        showSizeChanger: false
                    }} />
            </div>
        )
    }
}

export default withRouter(ModifyUserInfoList)